<!-- QueryGroup.vue 修改后 -->
<template>
	<div class="query-group" :style="{ marginLeft: `${level * 20}px` }">
		<div class="group-header">
			<el-button type="text" class="collapse-btn" @click="isCollapsed = !isCollapsed">
				<el-icon :size="16">
					<arrow-down v-if="!isCollapsed" />
					<arrow-right v-else />
				</el-icon>
			</el-button>
			<!-- 修改为开关按钮组 -->
			<el-radio-group v-model="model.condition" size="small" style="margin-right: 10px">
				<el-radio-button label="and">且</el-radio-button>
				<el-radio-button label="or">或</el-radio-button>
			</el-radio-group>
			<el-button size="small" @click="addRule">条件</el-button>
			<el-button size="small" @click="addGroup">条件组</el-button>
			<el-button v-if="level > 0" size="small" type="danger" @click="$emit('delete')">
				删除
			</el-button>
		</div>

		<!-- 以下保持不变 -->
		<div v-show="!isCollapsed" class="group-body">
			<template v-for="(rule, index) in model.rules" :key="index">
				<query-group v-if="isGroup(rule)" v-model="model.rules[index]" :level="level + 1"
					@delete="removeRule(index)" @update:modelValue="updateChild(index, $event)">
					<template #default="scope">
						<slot name="default" v-bind="scope" />
					</template>
				</query-group>
				<query-rule v-else :model-value="rule" @update:modelValue="updateChild(index, $event)"
					@delete="removeRule(index)" @addRule="addRule(index+1)" @addGroup="addGroup(index+1)">
					<template #default="scope">
						<slot name="default" v-bind="scope" />
					</template>
				</query-rule>
			</template>
		</div>
	</div>
</template>

<script>
	import QueryRule from './QueryRule.vue'
	import {
		ArrowDown,
		ArrowRight
	} from '@element-plus/icons-vue'

	export default {
		name: 'QueryGroup',
		components: {
			QueryRule,
			ArrowDown,
			ArrowRight
		},
		props: {
			modelValue: {
				type: Object,
				required: true
			},
			level: {
				type: Number,
				default: 0
			}
		},
		emits: ['update:modelValue', 'delete'],
		data() {
			return {
				isCollapsed: false
			}
		},
		computed: {
			model: {
				get() {
					return this.modelValue
				},
				set(value) {
					this.$emit('update:modelValue', value)
				}
			}
		},
		methods: {
			isGroup(rule) {
				return 'condition' in rule && 'rules' in rule
			},
			addRule(index) {
				if (index) {
					this.model.rules.splice(index, 0, {
						field: '',
						operator: 'equal',
						value: '',
						type: 'string'
					});
					return;
				}
				this.model.rules.push({
					field: '',
					operator: 'equal',
					value: '',
					type: 'string'
				})
			},
			addGroup(index) {
				if (index) {
					this.model.rules.splice(index, 0, {
						condition: 'and',
						rules: []
					});
					return;
				}
				this.model.rules.push({
					condition: 'and',
					rules: []
				})
			},
			removeRule(index) {
				this.model.rules.splice(index, 1)
			},
			updateChild(index, newValue) {
				this.model.rules.splice(index, 1, newValue)
				this.$emit('update:modelValue', this.model)
			}
		}
	}
</script>

<style scoped>
	.query-group {
		border-left: 2px solid #eee;
		padding: 10px 0;
		margin: 5px 0;
	}

	.group-header {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 8px;
	}

	.collapse-btn {
		padding: 0;
		margin-right: 8px;
		width: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.group-body {
		padding-left: 20px;
	}
</style>
